<template>
    <div class="hand">
        <div class="wrapper">
            <transition-group name="card" tag="div" class="cards">
                <Card v-for="card of cards" :def="card.def" :key="card.uid" 
                @play="handlePlay(card)"
                />
            </transition-group>
            
        </div>
    </div>
</template>

<script>
import Card from './card'
export default {
    props:['cards'],
    components: {
        Card,
    },
    methods: {
        handlePlay(card) {
            this.$emit('card-play', card)
        }
    }
}
</script>

<style scoped>
.hand-enter-active .wrapper,
.hand-leave-active .wrapper {
    transition: transform .8s cubic-bezier(.08, .74, .34, 1);
    transform-origin: bottom center;
}
.hand-enter .wrapper,
.hand-leave-to .wrapper {
    transform: rotateX(90deg);
}
.hand-enter-active .card,
.hand-leave-active .card {
    transition: margin .8s cubic-bezier(.08, .74, .34, 1);
}
.hand-enter .card,
.hand-leave-to .card {
    margin: 0 -100px;
}
.card {
    transition: transform .3s;
}
.card-enter {
    opacity: 1;
    transform: scale(.8) translateX(100px);
}
.card-leave-active {
    transition: all 1s, opacity .5s .5s;
    position: absolute !important;
    z-index: 10;
    pointer-events: none;
}
.card-leave-to {
    opacity: 0;
    transform: translateX(-106px) translateY(-300px) scale(1.5);
}
</style>

